<template>
	<view>
		<view class="tab_nav">
			<view class="navTitle" v-for="(item, index) in navList" :key="index">
				<view :class="{ active: isActive === index }" @click="checked(index)">{{ item.title }}</view>
			</view>
		</view>
		<view class="nav_item" v-if="isActive == 0">
			<view class="k" v-if="!arr2.length">您还没有待支付订单</view>
			<view class="item" v-else v-for="item in arr2" :key="item.id">
				<view class="item-l"><image :src="item.img" mode=""></image></view>
				<view class="item-r">
					<view class="r-1">{{ item.name }}</view>
					<view class="r-2">{{ item.address }}</view>
					<view class="r-3">
						<view class="rl">{{ item.price }}</view>
						<view class="rr">
							<view class="rr1" @click="qrdd(item)">支付订单</view>
							<view class="rr2" @click="sc(item.id)">取消订单</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nav_item" v-if="isActive == 1">
			<view class="k" v-if="!arr3.length">您还没有待服务的订单</view>
			<view class="item" v-else v-for="item in arr3" :key="item.id">
				<view class="item-l"><image :src="item.img" mode=""></image></view>
				<view class="item-r">
					<view class="r-1">{{ item.name }}</view>
					<view class="r-2">{{ item.address }}</view>
					<view class="r-3">
						<view class="rl">{{ item.price }}</view>
						<view class="rr">
							<view class="rr1" @click="qrdd(item)">确认服务</view>
							<view class="rr2" @click="sc(item.id)">取消订单</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nav_item" v-if="isActive == 2">
			<view class="k" v-if="!arr4.length">您还没有待评价订单</view>
			<view class="item" v-else v-for="item in arr4" :key="item.id">
				<view class="item-l"><image :src="item.img" mode=""></image></view>
				<view class="item-r">
					<view class="r-1">{{ item.name }}</view>
					<view class="r-2">{{ item.address }}</view>
					<view class="r-3">
						<view class="rl">{{ item.price }}</view>
						<view class="rr"><view class="rr1">评价订单</view></view>
					</view>
				</view>
			</view>
		</view>
		<view class="nav_item" v-if="isActive == 3">
			<view class="k" v-if="!arr5.length">您还没有订单</view>
			<view class="item" v-for="item in arr5" :key="item.id">
				<view class="item-l"><image :src="item.img" mode=""></image></view>
				<view class="item-r">
					<view class="r-1">{{ item.name }}</view>
					<view class="r-2">{{ item.address }}</view>
					<view class="r-3">
						<view class="rl">{{ item.price }}</view>
						<view class="rr">
							<view class="rr1" v-if="item.state == 2" @click="qrdd(item)">支付订单</view>
							<view class="rr1" v-if="item.state == 3 || item.state == 4" @click="qrdd(item)">{{ item.state == 3 ? '确认服务' : '评价订单' }}</view>
							<view class="rr2" v-if="item.state == 2" @click="sc(item.id)">取消订单</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
// 订单状态比如  1等于未确认 2等于待服务 3等于待支付 4待评价
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs } from 'vue'
import { queryOrder, deleteOrder, queryOrder2, takeOrders } from '@/api/modules/ored'
const state = reactive({
	isActive: 0,
	arr2: [],
	arr3: [],
	arr4: [],
	arr5: [],
	navList: [
		{
			index: 0,
			title: '待支付'
		},
		{
			index: 1,
			title: '待服务'
		},
		{
			index: 2,
			title: '待评价'
		},
		{
			index: 3,
			title: '全部订单'
		}
	]
})
const cxdd = async () => {
	const a = await queryOrder(2)
	state.arr2 = a
	const b = await queryOrder(3)
	state.arr3 = b
	const c = await queryOrder(4)
	state.arr4 = c
	const d = await queryOrder2()
	state.arr5 = d
	console.log(state.arr5)
}

const sc = async id => {
	await deleteOrder(id)
	cxdd()
}

const qrdd = async (e) => {
	console.log(e.id, e.state*1+1)
	await takeOrders({ id: e.id, state: e.state*1+1 })
	cxdd()
}

const checked = index => {
	state.isActive = index
}
// 页面加载
onLoad(message => {
	cxdd()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { isActive, navList, arr2, arr3, arr4, arr5 } = toRefs(state)
</script>

<style lang="scss">
.tab_nav {
	display: flex;
	justify-content: center;
	align-items: center;
}
.tab_nav .navTitle {
	height: 90rpx;
	line-height: 90rpx;
	width: 100%;
	text-align: center;
	font-size: 32rpx;
	font-family: Alibaba PuHuiTi;
	color: #333;
}
.active {
	position: relative;
	color: #1f75fe;
}
.active::after {
	content: '';
	position: absolute;
	width: 100rpx;
	height: 4rpx;
	background-color: #1f75fe;
	left: 0px;
	right: 0px;
	bottom: 0px;
	margin: auto;
}
.nav_item {
	padding: 20rpx;
	.k {
		text-align: center;
		color: #ccc;
		margin-top: 200rpx;
	}
	.item {
		display: flex;
		margin-bottom: 40rpx;
		.item-l {
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.item-r {
			width: 500rpx;
			.r-1 {
				font-size: 36rpx;
			}
			.r-2 {
			}
			.r-3 {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				.rl {
					color: red;
					margin-top: 20rpx;
					font-size: 36rpx;
				}
				.rr {
					display: flex;
					line-height: 60rpx;
					.rr1 {
						font-size: 28rpx;
						padding: 0 20rpx;
						border-radius: 10rpx;
						margin-right: 20rpx;
						background-color: red;
					}
					.rr2 {
						font-size: 28rpx;
						border: 2rpx solid #ccc;
						padding: 0 20rpx;
					}
				}
			}
		}
	}
}
</style>
